<style>
    .boxsizingBorder {
        width:100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
</style>
<template>
    <div>
        <textarea class="boxsizingBorder" rows="10" v-model="requestBody" placeholder="request body"></textarea>
    </div>
</template>

<script>
    export default{
        props:['value'],
        data:function(){
            return {}
        },
        methods:{
            formatJson:function(v){
                var ugly = v.toString()
                var obj = JSON.parse(ugly);
                var pretty = JSON.stringify(obj, undefined, 4);
                return pretty
            }
        },
        computed: {
            requestBody: {
                get: function(newValue) {
                    return this.formatJson(this.value).toString()
                },
                set: function(modifiedValue) {
                    this.$emit('input',this.formatJson(modifiedValue))
                }
            }
        }

    }
</script>
